<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  <meta name="description" content="SvgC examples" />
   <link href="prettify.css" media="screen" rel="stylesheet" type="text/css" />
   <link href="style.css"    media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../js/svg_c.js"></script>
  <script type="text/javascript" src="prettify.js"></script>
  <title>SvgC - Events and animation</title>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>4. Events and animation</h1>
<h2>4.1 Additional attributes parameter</h2>
Events can be attached to created elements by passing event function name as key and function body as value in additional attributes parameter.

<h2>4.2 Standard addEventListener</h2>
An alternative way to attach an event is using standard addEventListener / removeEventListener DOM level 2 functions.

<h2>4.3 Animation</h2>
  <table>
    <tr>
      <td>
  <div id="example1">
    <script type="text/javascript">
    //<![CDATA[
var c = new SvgC("example1", 200, 200);
c.translate(80, 100);
c.g("#wave", function (c, g) {
  c.circle(-40, 20*Math.sin(1*Math.PI/6), 4, {fill:"#e0e505"});
  c.circle(-20, 20*Math.sin(2*Math.PI/6), 5, {fill:"#ffce00"});
  c.circle(  0, 20*Math.sin(3*Math.PI/6), 6, {fill:"#fdb100"});
  c.circle( 20, 20*Math.sin(4*Math.PI/6), 7, {fill:"#ff8900"});
  c.circle( 40, 20*Math.sin(5*Math.PI/6), 8, {fill:"#ff6500"});
  c.circle( 60, 20*Math.sin(6*Math.PI/6), 8, {fill:"#ff0800"});

  var cc = Array.prototype.slice.call(g.querySelectorAll("circle"));
  cc.forEach(function (e) {e.alfa=0});

  var f = function() {
    cc.forEach(function(e, i) {
      e.alfa += Math.PI / 10;
      c.set(e, "cy", 20*Math.sin((i+1)*Math.PI/6 + e.alfa));
    });
  }
  setInterval(f, 50);
});
//]]>
    </script>
  </div>
      </td>
      <td>
        <h3>Example 1: Wave</h3>
        <pre class="prettyprint">
var c = new SvgC("example1", 200, 200);
c.translate(80, 100);
c.g("#wave", function (c, g) {
  c.circle(-40, 20*Math.sin(1*Math.PI/6), 4, {fill:"#e0e505"});
  c.circle(-20, 20*Math.sin(2*Math.PI/6), 5, {fill:"#ffce00"});
  c.circle(  0, 20*Math.sin(3*Math.PI/6), 6, {fill:"#fdb100"});
  c.circle( 20, 20*Math.sin(4*Math.PI/6), 7, {fill:"#ff8900"});
  c.circle( 40, 20*Math.sin(5*Math.PI/6), 8, {fill:"#ff6500"});
  c.circle( 60, 20*Math.sin(6*Math.PI/6), 8, {fill:"#ff0800"});

  var cc = Array.prototype.slice.call(g.querySelectorAll("circle"));
  cc.forEach(function (e) {e.alfa=0});

  var f = function() {
    cc.forEach(function(e, i) {
      e.alfa += Math.PI / 10;
      c.set(e, "cy", 20*Math.sin((i+1)*Math.PI/6 + e.alfa));
    });
  }
  setInterval(f, 50);
});
        </pre>
      </td>
    </tr>
    <tr>
      <td>
  <div id="example2">
    <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example2", 200, 200);
c.defs(function (c, d) {
  c.attrs["path"] = {"stroke-width":"4px", fill:"none"};
  c.path("#fx", "m 3,3 c 0,-8 -15,-13 -15,-13 l 0,26 c 0,8 15,13 15,13 z");
});

c.g("#windmill", function (c, g) {
  c.translate(100, 100);
  c.use(0, 0, "#fx");
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#0aa54a"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#4996ce"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#772e8a"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#ff0000"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#ef8a1e"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#ffcc00"});

  var ft = c.svgEl.createSVGTransform();
  var ff = function() {
    ft.setRotate((ft.angle+2)%360, 100-15, 100-13);
    g.transform.baseVal.initialize(ft);
  }
  setInterval(ff, 50);
});
//]]>
    </script>
  </div>
      </td>
      <td>
        <h3>Example 2: Windmill</h3>
        <pre class="prettyprint">
var c = new SvgC("example2", 200, 200);
c.defs(function (c, d) {
  c.attrs["path"] = {"stroke-width":"4px", fill:"none"};
  c.path("#fx", "m 3,3 c 0,-8 -15,-13 -15,-13 l 0,26 c 0,8 15,13 15,13 z");
});

c.g("#windmill", function (c, g) {
  c.translate(100, 100);
  c.use(0, 0, "#fx");
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#0aa54a"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#4996ce"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#772e8a"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#ff0000"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#ef8a1e"});
  c.rotate(60, -15, -13).use(0, 0, "#fx", {stroke:"#ffcc00"});

  var ft = c.svgEl.createSVGTransform();
  var ff = function() {
    ft.setRotate((ft.angle+2)%360, 100-15, 100-13);
    g.transform.baseVal.initialize(ft);
  }
  setInterval(ff, 50);
});
        </pre>
      </td>
    </tr>
    <tr>
      <td>
  <div id="example3">
    <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example3", 200, 200);
c.defs(function (c, d) {
  c.gradient("#fire0", "l89:0-#dc0,30%-#ec0,50%-#fb0,80%-#f00");
  c.gradient("#fire1", "l91:0-#dc0,27%-#ec0,45%-#fb0,76%-#f00");
  c.gradient("#fire2", "l92:0-#dc0,28%-#ec0,45%-#fb0,77%-#f00");
  c.gradient("#fire3", "l90:0-#dc0,29%-#ec0,50%-#fb0,79%-#f00");
});

c.translate(90, 180).g("#fire", function(c, g) {
  c.attrs["*"] = {fill:"url(#fire0)", stroke:"white", "stroke-width":"8px", "stroke-linejoin":"round"};
  c.path("#f2", [
    "m", 25,0,
     "c ", 0,  0,  17, -7,  20,-20,
          4,-20, -10,-38, -13,-42,
         -4, -6, -10, -9, -22,-18,
         -6, -4,   0,-25, -25,-30,
         20, 20, -14, 75, -11, 91,
         4,  17,  25, 19,  25, 18,
     "z"]);
  c.path("#f1", "m 20,0 c 0,0 -45,-24 -34,-55 11,-32 39,-40 39,-65 20,15 14,65 3,76 -19,21 -8,44 -8,43 z");

  g.fireI = 0;
  var f = function() {
    g.fireI = (g.fireI+1) % 4;
    c.set("#f1", "fill", "url(#fire"+(g.fireI)+")");
    c.set("#f2", "fill", "url(#fire"+(g.fireI)+")");
  }
  setInterval(f, 200);
});
//]]>
    </script>
  </div>
      </td>
      <td>
        <h3>Example 3: Fire</h3>
        <pre class="prettyprint">
var c = new SvgC("example3", 200, 200);
c.defs(function (c, d) {
  c.gradient("#fire0", "l89:0-#dc0,30%-#ec0,50%-#fb0,80%-#f00");
  c.gradient("#fire1", "l91:0-#dc0,27%-#ec0,45%-#fb0,76%-#f00");
  c.gradient("#fire2", "l92:0-#dc0,28%-#ec0,45%-#fb0,77%-#f00");
  c.gradient("#fire3", "l90:0-#dc0,29%-#ec0,50%-#fb0,79%-#f00");
});

c.translate(90, 180).g("#fire", function(c, g) {
  c.attrs["*"] = {fill:"url(#fire0)", stroke:"white", "stroke-width":"8px", "stroke-linejoin":"round"};
  c.path("#f2", [
    "m", 25,0,
     "c ", 0,  0,  17, -7,  20,-20,
          4,-20, -10,-38, -13,-42,
         -4, -6, -10, -9, -22,-18,
         -6, -4,   0,-25, -25,-30,
         20, 20, -14, 75, -11, 91,
         4,  17,  25, 19,  25, 18,
     "z"]);
  c.path("#f1", "m 20,0 c 0,0 -45,-24 -34,-55 11,-32 39,-40 39,-65 20,15 14,65 3,76 -19,21 -8,44 -8,43 z");

  g.fireI = 0;
  var f = function() {
    g.fireI = (g.fireI+1) % 4;
    c.set("#f1", "fill", "url(#fire"+(g.fireI)+")");
    c.set("#f2", "fill", "url(#fire"+(g.fireI)+")");
  }
  setInterval(f, 200);
});
        </pre>
      </td>
    </tr>
  </table>
</div>
</body>
</html>
